$(() => {
    let id = 628;
    let navUl = $("nav>.bg>ul");
    // 请求加载
    let currentAjax = () => {
        $("article>ul").empty();
        $(".loading").css("display","block");
        $(".empty").css("display","none");
        $.ajax({
            url: 'https://m.youxiake.com/api/m/channel/outdoor/flow',
            type: 'GET',
            data: {
                page: 1,
                themeId: id,
                sitecode: 1,
            },
            // dataType: 'jsonp',
            success: function(data){
                console.log(data);
                if(data.data.data.list.length == 0){
                    $(".empty").css("display","block");
                }else{
                    data.data.data.list.map((v,i) => {
                        if(i == 0){
                            return ;
                        }else{
                            let ele = ` 
                                <li>
                                    <a href="./details/index.html?pid=${v.dataDetail.pid}">
                                        <div class="img">
                                            <div class="flag">${v.dataDetail.placeLabel}</div>
                                            <img src="${v.dataDetail.image}" alt="">
                                        </div>
                                        <div class="title">${v.dataDetail.title}</div>
                                        <div class="desc">${v.dataDetail.productType}-${v.dataDetail.outDoorLabel}-${v.dataDetail.days}</div>
                                        <div class="price">
                                            <div style="color: #ff7400; font-size: 14px; font-weight: bold"><span style="font-size: 12px; font-weight: normal;">￥</span>${v.dataDetail.priceLabel}<span style="color: #e8e8; font-size: 12px; font-weight: normal;">起</span> </div>
                                            <div style="color: #9a9a9a;">${v.dataDetail.numLabel}</div>
                                        </div>
                                    </a>
                                </li> 
                            `;
                            $(ele).appendTo( $("article>ul") );
                        }      
                    })
                }
                $(".loading").css("display","none");
            },
            error: function(err2){
                console.log(err2);
            }
        })
    }
    // 初始化渲染
    var init = () => {
        let tabArr = [
            { title: '全球徒步', codeId: 628, isActive: true },
            { title: '周边徒步', codeId: 677, isActive: false },
            { title: '骑行', codeId: 678, isActive: false },
            { title: '露营体验', codeId: 679, isActive: false },
            { title: '攀岩速降', codeId: 680, isActive: false },
            { title: '空中项目', codeId: 681, isActive: false },
            { title: '滑雪溜冰', codeId: 682, isActive: false },
            { title: '水上项目', codeId: 683, isActive: false },
            { title: '荒野生存', codeId: 684, isActive: false },
            { title: '户外课堂', codeId: 685, isActive: false },
        ];
        tabArr.map(v => {
            let newLi = document.createElement("li");
            if (v.isActive) {
                $(newLi).addClass("active")
            }
            $(newLi).html(v.title).attr("id",v.codeId).appendTo(navUl);
        });
        currentAjax();
    }
    init();
    // 导航栏
    $("nav>.bg>ul>li").click((e) => {
        if ($(e.currentTarget).hasClass("active")) {
            return;
        }
        $(e.currentTarget).addClass("active").siblings().removeClass("active");
        console.log($( e.currentTarget ).attr("id"))
        id = $( e.currentTarget ).attr("id");
        console.log(id);
        // 请求加载
        currentAjax();
    })
    // 触摸事件
    let touch = () => {
        let startX = null;
        let moveX = null;
        let endX = null;
        navUl.on('touchstart', (e) => {
            startX = e.targetTouches[0].pageX - endX;
            console.log("startX", startX);
        })

        navUl.on('touchmove', (e) => {
            e.preventDefault();
            moveX = e.targetTouches[0].pageX - startX;
            console.log("moveX", moveX);
            navUl.css("left", moveX + "px");
        })

        navUl.on('touchend', () => {
            if (moveX >= 50) {
                moveX = 0;
                navUl.css("left", 0 + "px");
            } else if (moveX <= -680) {
                moveX = -680;
                navUl.css("left", -680 + "px");

            }
            endX = moveX;
        })
    }
    touch();
})